<template>
  <div>
    <router-view :class="[mode]">
    </router-view>
    <reset-pwd :header="dialog.header" :visible.sync="dialog.open" v-if="dialog.open"></reset-pwd>
    <!-- <add-edit-tzgg :disabled="dialog.disabled" :header="dialog.header" :objId="dialog.objId"
      :visible.sync="dialog.open_tzgg" v-if="dialog.open_tzgg"></add-edit-tzgg> -->
  </div>
</template>

<script lang="jsx">
import Vue from 'vue';
import config from '@/config/style';
import ResetPwd from './pages/user/components/reset-pwd.vue'
// import AddEditTzgg from "./pages/common/tzgg/components/add-edit-tzgg.vue";

export default Vue.extend({
  components: {
    ResetPwd,
    // AddEditTzgg
  },
  data() {
    return {
      dialog: {
        header: "当前登录密码为默认密码不安全，需要重置密码。",
        open: false,
        disabled: false,
        open_tzgg: false,
        objId: null,
      },
      timer: null,
      content: '',
    }
  },
  computed: {
    mode() {
      return this.$store.getters['setting/mode'];
    },
  },
  watch: {
    '$store.state.user.token': {
      immediate: true,
      async handler(val) {
        if (val) {
          // 设置全局api
          const apiModule = await import('@/api')
          Vue.prototype.$api = apiModule.default
          // 设置字典
          const dictMoudule = await import("@/components/DictData")
          Vue.use(dictMoudule.default)
          // 设置路由
          // const routeMoudule = await import("@/router/routerList")
          // this.$router.addRoutes(routeMoudule.default)
          // console.log(this.$router.getRoutes())
          // 判断用户是否默认密码
          this.$api.system.user.checkUserIsDefaultPwd().then(response => {
            if (response.data && !this.$store.state.user.permissions.includes("*:*:*")) {
              this.dialog.open = true;
            }
          }).catch((e) => {
            this.$message.error(e.toString());
          });
        }
      }
    }
  },
  mounted() {
    this.$store.dispatch('setting/changeTheme', { ...config });
    this.timer = setInterval(this.getMyPopMessage, 20 * 1000);
  },
  methods: {
    footer(val) {
      return (
        <div slot="footer" class="t-notification__detail">
          <t-button onClick={(event) => this.handleClick(val)} className="t-notification__detail-item" theme="primary" variant="text">
            查看详情
          </t-button>
        </div>
      );
    },
    handleClick(val) {
      this.dialog.header = "系统通知";
      this.dialog.disabled = true;
      this.dialog.objId = val.id;
      this.dialog.open_tzgg = true;
    },
    getMyPopMessage() {
      if (this.$store.state.user.token) {
        this.$api.system.message.getMyPopMessage().then(response => {
          if (response.data.length > 0) {
            response.data.forEach(val => {
              this.$notify.info({
                placement: 'top-right',
                title: val.serviceName + val.title,
                content: val.content,
                closeBtn: true,
                duration: 0,
                offset: [0, 42],
                footer: () => { return this.footer(val) }
              });
            })
          }
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
});
</script>

<style lang="less" scoped>
.t-notification__detail {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
